<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :style="'background-image: url(' + p.img + ')'" v-for="p of projects">
        <h2 v-text="p.txt"></h2>
      </div>
    </div>
    <div class="swiper-pagination swiper-pagination-bullets">
      <b class="swiper-pagination-bullet" :class="{'swiper-pagination-bullet-active': i == active}"
         v-for="(e, i) in projects"></b>
    </div>
  </div>
</template>

<script>
import { onBeforeRouteUpdate } from 'vue-router'
import { nextTick, onMounted, reactive, toRefs } from 'vue'
import { TweenLite, Elastic, Power4 } from 'gsap'
import { Swiper } from 'swiper'
import { projects } from './data'

function createElement (tag, clazz, html) {
  var el = document.createElement('div')
  el.className = clazz
  el.innerHTML = html
  return el
}

function delay (timeout = 150, result) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(result)
    }, timeout)
  })
}

export default {
  setup () {
    const data = reactive({
      projects: [],
      active: 0
    })
    onMounted(() => {
      nextTick(() => {
        new Swiper('.swiper-container', {
          watchSlidesProgress: true,
          // watchSlidesVisibility: true, // slides that in viewport will have additional visible class
          // virtualTranslate: true, // 较好的解决方案但会导致滚轮失效
          mousewheel: true,
          grabCursor: true,
          autoplay: true,
          freeMode: true,
          speed: 400, // 限制滚轴时间间隔
          loop: true,
          on: {
            slideChange: function (swiper) {
              data.active = swiper.realIndex
            },
            setTranslate: function (swiper, translate) {
              var slides = swiper.slides
              console.log(slides)
              // slide.style.transform = `transform: translateX(${translate / 100})`
            }
          },
        })
      })
    })

    onBeforeRouteUpdate(async (to, from, next) => {
      console.info('this in onBeforeRouteUpdate', from, to)
      await delay(100)
      next()
    })

    return {
      ...toRefs(data),
    }
  },
  async beforeRouteEnter (to, from, next) {
    console.info('this in beforeRouteEnter', this)
    let ps = await delay(550, projects)
    next(vm => {
      vm.projects = ps
    })
  },
  beforeRouteLeave (to, from, next) {
    console.info('this in beforeRouteLeave', this)
    delay(300)
    next(vm => {
      console.log('got vm', vm)
      vm.other = 'Hola'
    })
  },
}
</script>

<style>
@import "~swiper/swiper-bundle.min.css";
.swiper-slide {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
h2 {
  color: #fff;
  font-size: 11vw;
  line-height: 0;
  letter-spacing: -0.04em;
  display: inline;
  position: absolute;
  max-width: 74.61937%;
  white-space: normal;
  left: 0;
  bottom: calc(50% - 75px);
  margin-left: 12.69031%;
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: none;
  border: 1px solid #fff;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: #fff;
}
h2 {
  width: 80%;
  text-align: left;
  display: inline-block;
  padding-top: 46px;
  opacity: 0;
  transition-duration: 1.2s;
}
h2 p {
  margin-top: 1em;
  color: #333;
  font-size: 15px;
}
.swiper-slide-prev h2 {
  transform: translateX(-70px);
}

.swiper-slide-next h2 {
  transform: translateX(70px);
}
.swiper-slide-active h2 {
  opacity: 1;
  transform: translateX(0);
}
@media only screen and (max-width: 1068px) {
  h2 {
    padding-top: 41px;
  }
}
@media only screen and (max-width: 735px) {
  .swiper-slide-active {
    transform: scale(1);
  }

  h2 {
    padding-top: 26px;
    width: 90%;
  }
}
</style>
